import React, { useState, useEffect } from 'react';
import { MyCardsWrapper, CardItemWrapper } from './styleMy';
import { useSelector, useDispatch } from "react-redux"
import Card from '@/components/myComponents/cards/Card';
import Label from '@/components/myComponents/label/Label';
import Alert from '@/components/myComponents/alert/Alert';
import { loadDataUserInfoSync } from "./store/actionCreator"

const Cards = () => {
    const userInfo = useSelector((state) => {
        return state.getIn(['My', 'userInfo'])
    })
    const dispatch = useDispatch()

    const [alertState, setAlertState] = useState(false)
    const [data, setData] = useState([])
    const [index, setIndex] = useState(-1)
    const [userinfo, setUserinfo] = useState({})
    const clickHandler = (e) => {
        setAlertState(!alertState);
        const flag = data.indexOf(e.target.textContent);
        if (flag >= 0) {
            setIndex(flag)
        }
    }

    useEffect(() => {
        (async () => {
            await dispatch(loadDataUserInfoSync())
        })()
    }, [dispatch])

    useEffect(() => {
        const userName = userInfo.reduce((value, item) => {
            value.push(item.name)
            return value
        }, [])
        setData(userName)
        if (userInfo.length > 0) {
            setUserinfo(userInfo[0])
        }
    }, [userInfo])

    useEffect(() => {
        if (index < 0) return
        setUserinfo(userInfo[index])
    }, [index])

    return (
        <>
            <MyCardsWrapper>
                <Card
                    height="1.5rem"
                    bgColor="#2984f8"
                    padding=".2rem .2rem .2rem .2rem"
                    borderRadius=".2rem"
                >
                    <CardItemWrapper>
                        <img src={userinfo.img} alt="" />
                        <div>
                            <div>
                                <span>{userinfo.name}</span>
                                <Label
                                    size=".14rem"
                                    color="#ffffff"
                                    bgcolor="#FA746B"
                                    padding=".05rem .1rem"
                                    margin="0 0 0 .1rem"
                                    borderRadius=".1rem"
                                    border="0"
                                >{userinfo.relation}</Label>
                                <Label
                                    size=".14rem"
                                    color="#ffffff"
                                    bgcolor="#3DD47A"
                                    padding=".05rem .1rem"
                                    margin="0 0 0 .1rem"
                                    borderRadius=".1rem"
                                    border="0"
                                >{userinfo.state?"已签约":"未签约"}</Label>
                            </div>
                            <div>
                                <i>{userinfo.sex}</i>
                                <i>{userinfo.age}岁</i>
                            </div>
                        </div>
                    </CardItemWrapper>
                    <div className="changeMembers">
                        <button onClick={clickHandler}>切换家庭成员</button>
                    </div>
                    <Alert
                        data={data}
                        alertState={alertState}
                        onClick={clickHandler}
                        title="请选择签约人"
                        footer="取消"
                    ></Alert>
                </Card>
            </MyCardsWrapper>

        </>
    );
}

export default Cards;